<? // no direct access
defined( '_JEXEC' ) or die( 'Restricted access' ); ?>

<script type="text/javascript" src="<?= JURI::base(true) ?>/media/system/js/jcarousellite.js"></script>
<script type="text/javascript" src="<?= JURI::base(true) ?>/media/system/js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="<?= JURI::base(true) ?>/media/system/js/jquery.prettyPhoto.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="<?= JURI::base(true) ?>/media/system/css/prettyPhoto/prettyPhoto.css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8">
<link rel="stylesheet" type="text/css" href="<?= JURI::base(true) ?>/modules/mod_pbny_weekly_videos/tmpl/styles.css"/> 

<script type="text/javascript">
	jQuery(document).ready(
		function(){
		    jQuery("a[rel^='prettyPhoto']").prettyPhoto({showTitle:false});
			
			var size = jQuery('.video_carousel ul li').size();
				if(size > 6)
					size = 6;
					
			jQuery('.video_carousel').jCarouselLite({
				btnNext: ".video_next",
				btnPrev: ".video_prev",
				visible: size,
				mouseWheel: true
			});
		}
	);
</script>

<h4 style="margin-bottom:5px">VIDEOS</h4>
<div style="float:left;">
	<input type="button" class="video_prev" value="<" />
</div>
<div style="float:left;">
<div class="video_carousel">
	<ul>
	<? foreach($videos as $video): ?>
		<li style="padding-left:16px;">
			<a href="<?= $video->video ?>" title="<?= $video->description ?>" rel="prettyPhoto[pp_gal]">
				<img src="<?= $video->thumbnail ?>" alt="<?= $video->type_instance ?>" width="120" height="90" />
			</a>
		</li>
	<? endforeach ?>
	</ul>	
</div>
</div>
<div style="float:right;">
	<input type="button" class="video_next" value=">"/>
</div>
<div class="clear"></div>
